<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>02 class和style</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .red{
            background: red;
        }
        .yellow{
            background: yellow;
        }
        .a {
          width:100px;
        }
        .b {
            height: 50px;
        }
        .c {
            background: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
        <div  style="background: yellow;">背景色为黄色 </div>
        <button @click="handClick()">click</button>
        <div :class="isActive?'red':'yellow'">我是动态的class-三目运算</div>
        <div :class="classobj">我是动态的class-对象</div>
        <button v-on:click="objClick()">click</button>
        <div v-bind:class="classarr">我是动态的class-数组</div>
        <button v-on:click="arrClick()">click</button>
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data: {
                isActive:true,
                classobj:{
                    a:true,
                    b:true,
                },
                classarr:['a','b']
            },
            methods:{
                handClick(){
                    this.isActive=!this.isActive;
                },
                objClick(){
                    this.classobj.c = true;
                    console.log(this.classobj);
                },
                arrClick(){
                    let index = this.classarr.indexOf("c");
                    if(index>-1){
                        this.classarr.splice(index,1)
                    }else{
                        this.classarr.push("c");
                    }
                }
            }
        })
    </script>

</html>